import advertisementLess from "./index.module.less";
import { CloseCircleOutlined } from "@ant-design/icons";
import { GetAdvertisementListApi } from "@/http/api/article";
import { AdvertisementListType } from "./utils/type";
import { useEffect, useState } from "react";
function Advertisement() {
  const [AdvertisementList, setAdvertisementList] = useState([]);

  const GetAdvertisementList = async () => {
    const res: any = await GetAdvertisementListApi();
    console.log("获取到广告列表", res);
    if (res.status === 0) {
      setAdvertisementList(res.AdvertisementList);
    }
  };

  useEffect(() => {
    GetAdvertisementList();
  }, []);

  return (
    <>
      <div className={advertisementLess.Advertisement_content}>
        {AdvertisementList.map((item: AdvertisementListType, index: number) => {
          return (
            <a
              className="Advertisement_items"
              key={index}
              href={item.AdvertisementUrl}
              target="_blank"
            >
              <img src={item.AdvertisementImgUrl} alt="背景图" />
              <div className="right_close">
                <CloseCircleOutlined />
              </div>
              <div className="right_bottom_add">
                <div className="send_Advertisement">投放&nbsp;</div>
                <div>广告</div>
              </div>
            </a>
          );
        })}
      </div>
    </>
  );
}

export default Advertisement;
